<template>
	<!-- 自定义头部 -->
	<custom-navbar title="投票列表" bgColor="#fff" textColor="#333"  :showBack="false">
		<!-- 右侧自定义按钮 -->
		<!--   <template #right>
	        <view class="right-btn" @click="saveInfo">
	          <text style="color: #007aff; font-size: 16px;">保存</text>
	        </view>
	      </template> -->
	</custom-navbar>
	<view class="search-cls">
		<view>
			<uni-search-bar bgColor="#ffffff" cancelButton="none" v-model="query" @clear="clearHandler"
				@confirm="search" @input="input" placeholder="投票标题" maxlength="30"></uni-search-bar>
		</view>
		<view class="type-cls">
			<uni-data-select v-model="voteFinishType" :localdata="voteFinishTypeRange"
				@change="voteFinishTypeRangeHandler"></uni-data-select>
		</view>
	</view>
	<mescroll-body ref='mescrollObj' @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback"
		v-if="Array.isArray(dataList)">
		<view class="news-li" v-for="vote in dataList" :key="vote?.id" @click="goHandler(vote)">
			<image src="../../static/image/text.png" mode=""></image>
			<view class="text-cls">
				<view class="title-cls ellipsis">{{vote?.voteTitle}}</view>
				<view class="content-cls">
					<block v-if="vote?.status==1">
						<view class="voting-cls">已发布</view>
					</block>
					<block v-else>
						<view class="now-cls" v-if='vote?.status==2'>{{'已结束'}}</view>
					</block>
					<view>结束时间：{{vote?.endTime}}</view>
				</view>

			</view>
		</view>
	</mescroll-body>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onPageScroll,
		onReachBottom,
		onLoad,
		onShow
	} from '@dcloudio/uni-app';
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";
	import {
		listAll
	} from '@/api/vote.js'
	import {
		compareDateTime,
		setStorageSync,
		getStorageSync
	} from '@/utils/index.js'
	import {
		useRouter
	} from '@/utils/index.js'
	import CustomNavbar from '@/components/CustomNavbar.vue';

	const mescrollObj = ref(null)
	const voteFinishType = ref('')
	const voteFinishTypeRange = ref([{
			text: '全部',
			value: ''
		},
		{
			text: '已发布',
			value: '1'
		},
		{
			text: '已结束',
			value: '2'
		}

	])
	const pattern = ref({
		color: '#7A7E83',
		backgroundColor: '#fff',
		selectedColor: '#007AFF',
		buttonColor: '#007AFF',
		iconColor: '#fff'
	})
	const horizontal = ref('right')
	const vertical = ref('bottom')
	const direction = ref('vertical')
	const content = ref([{
			iconPath: '/static/image/vote_text.png',
			selectedIconPath: '/static/vote_text_select.png',
			text: '文字',
			active: false
		},
		{
			iconPath: '/static/image/vote_pic.png',
			selectedIconPath: '/static/vote_pic_select.png',
			text: '图文',
			active: false
		},
	])
	const dataList = ref([]) // 数据列表
	const query = ref('')
	const queryForm = ref({
		pageNum: 1,
		pageSize: 10,
	});
	const voteFinishTypeRangeHandler = (e) => {
		voteFinishType.value = e;
		initData()
	}
	const goHandler = (vote) => {
		let obj = {
			voteId: vote.voteId,
			status: vote.status,
			userId: vote.userId,
			type: 1,
		}
		useRouter(`/pages/customvoting/customvoting?item=${encodeURIComponent(JSON.stringify(obj))}`)

	}
	const trigger = (e) => {
		if (e.index == 0) {
			useRouter('/pages/createWordVote/createWordVote', {
				type: 1
			})
		}
		if (e.index == 1) {
			useRouter('/pages/createPicVote/createPicVote', {
				type: 2
			})
		}
	}


	const {
		mescrollInit
	} = useMescroll(onPageScroll, onReachBottom) // 调用mescroll的hook
	const downOption = {
		auto: false //是否在初始化后,自动执行downCallback; 默认true
	}

	/* 自定义下拉刷新的回调,不使用useMescroll的downCallback */
	const downCallback = (mescroll) => {
		listAll({
			pageNum: 1,
			pageSize: 10,
			voteTitle: query.value,
			status: voteFinishType.value
		}).then(data => {
			console.log('rows', rows)
			dataList.value = data.rows
			mescroll.endSuccess();
		}).catch(() => {
			console.log('error')
			mescroll.endErr();
		})
	}

	/*上拉加载的回调: 其中mescroll.num:当前页 从1开始, mescroll.size:每页数据条数,默认10 */
	const upCallback = (mescroll) => {
		let pageNum = mescroll.num == 0 ? 1 : mescroll.num; // 页码, 默认从1开始
		let pageSize = mescroll.size;
		if (mescroll.num == 1) dataList.value = []; //如果是第一页需手动置空列表
		listAll({
			pageNum,
			pageSize,
			voteTitle: query.value,
			status: voteFinishType.value,
			statusList: [1, 2]
		}).then(curPageData => {
			dataList.value = dataList.value.concat(curPageData.rows); // 追加数据
			mescroll.endBySize(curPageData.rows.length, curPageData.rows); // 请求成功, 结束加载
		}).catch(() => {
			console.log('error')
			mescroll.endErr(); // 请求失败, 结束加载
		})
	}
	const clearHandler = () => {
		query.value = ''
		initData()
	}
	const search = (e) => {
		initData()
	}
	const input = (e) => {
		console.log('e', e)
	}
	const initData = () => {
		listAll({
			pageNum: 1,
			pageSize: 10,
			voteTitle: query.value,
			status: voteFinishType.value,
			statusList: [1, 2]
		}).then(data => {
			dataList.value = data.rows
		}).catch(() => {})
	}

	onShow(() => {
		initData()
	})
	// 计算内容区顶部距离（状态栏高度 + 导航栏高度）
	// const contentTop = ref(0);

	// onMounted(() => {
	// 	const {
	// 		statusBarHeight
	// 	} = uni.getSystemInfoSync();
	// 	// 导航栏高度固定44px（可根据实际需求调整）
	// 	contentTop.value = statusBarHeight + 44;
	// });

	// 左侧按钮点击事件
	const onLeftClick = () => {
		console.log('左侧区域被点击');
		// 可自定义返回逻辑
	};

</script>
<style scoped lang="less">
	/deep/ .uni-select{
		background: #fff;
	}
	/deep/.uni-select__selector-item {
		// color:#b3b3b3;
	}

	/deep/.uni-select__input-placeholder {
		font-size: 14px;
		color: #b3b3b3;
	}

	/deep/.uni-searchbar__box {
		justify-content: flex-start;
	}

	/deep/ .uni-select__input-box {
		font-size: 14px;
		color: #b3b3b3;
	}

	/deep/ .uni-searchbar__box {
		border: 1px solid #e5e5e5;
	}

	.type-cls {
		padding: 0 20rpx 0rpx 10px;
		box-sizing: border-box;
	}

	.news-li {
		margin: 40rpx;
		background-color: #fff;
		height: 180rpx;
		padding: 30rpx;
		box-sizing: border-box;
		border-radius: 10px;
		display: flex;
		align-items: center;

		image {
			width: 100rpx;
			height: 100rpx;
			margin-right: 30rpx;
		}

		.text-cls {
			width: calc(100% - 130rpx);

			.title-cls {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 4px;
			}

			.content-cls {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 13px;
				padding-top: 2px;
			}

			.now-cls {
				color: blue;
				font-size: 13px;
			}

			.voting-cls {
				color: seagreen;
				font-size: 13px;
			}

			.close-cls {
				color: brown;
				font-size: 13px;
			}
		}


	}
</style>